<template>
<div id="app">
    <div class="tabs">
      <TabLeft :tabs="tabs" :currentIndex="currentIndex" @deliverIndex="changelist" />
      <TabRight :tabs="tabs" :currentIndex="currentIndex" />
    </div>
  </div>
</template>

<script>
import pic1 from './assets/pic1.jpg';
import pic2 from './assets/pic2.jpg';
import pic3 from './assets/pic3.jpg';

import TabLeft from './compinents/TabLeft.vue';
import TabRight from './compinents/TabRight.vue';
export default {
  data(){
    return {
      currentIndex:0,
      tabs:[
        {
          tabName:'三文鱼',
          list:[
            {pic:pic1,name:'三文鱼',price:45},
            {pic:pic1,name:'高级三文鱼',price:55},
            {pic:pic1,name:'vip三文鱼',price:65},
          ]
        },
         {
          tabName:'刺身',
          list:[
            {pic:pic2,name:'三文鱼',price:45},
            {pic:pic2,name:'高级三文鱼',price:55},
            {pic:pic2,name:'vip三文鱼',price:65},
          ]
        },
         {
          tabName:'鲍鱼',
          list:[
            {pic:pic3,name:'三文鱼',price:45},
            {pic:pic3,name:'高级三文鱼',price:55},
            {pic:pic3,name:'vip三文鱼',price:65},
          ]
        },
         {
          tabName:'海参',
          list:[
            {pic:pic1,name:'三文鱼',price:45},
            {pic:pic1,name:'高级三文鱼',price:55},
            {pic:pic1,name:'vip三文鱼',price:65},
          ]
        },
      ]
    }
  },
  components:{
    TabLeft,
    TabRight
  },
  methods:{
    changelist(index){
      this.currentIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs{
  display: flex;
}
</style>
